<template>
  <div class="created">
    <div class="created-conatiner">
      <div class="created-content">
        <i class="el-icon-success"></i>
        <p class="text">标注任务新建完成</p>
        <div class="handle-buttons">
          <el-button @click="godetails">查看详情</el-button>
          <el-button type="primary" @click="handleGoBack">返回列表</el-button>
        </div>
      </div>
    </div>
    <div class="pretreatment">
      <el-card>
        <template #header>
          <el-row>
            <el-col><p class="title">预处理</p></el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="tips">
                <el-icon
                    style="color: #448e97; size: 14px; margin-right: 5px; font-size: 14px"
                >
                  <InfoFilled
                  />
                </el-icon>
                影像布局有AI自动计算，根据项目复杂程度预处理时间几分钟或几小时不定，后台自动运行，可前往详情页查看
              </div>
            </el-col>
          </el-row>
          <el-row style="height: 40px; line-height: 40px; color: #666666">
            <el-col :span="4">成功数量：{{ precess.sucCount }}</el-col>
            <el-col :span="4">失败数量：{{ precess.failCount }}</el-col>
            <el-col :span="4">处理中数量：{{ precess.processCount }}</el-col>
            <el-col :span="4">未开始数量：{{ precess.notStartCount }}</el-col>
            <el-col :span="4">暂停数量：{{ precess.pauseCount }}</el-col>
            <el-col :span="4">新增数量：{{ precess.addCount }}</el-col>
          </el-row>
          <el-row :gutter="20" style="height: 40px; line-height: 40px; color: #333333">
            <el-col :span="8">
              <span style="display: inline-block; margin-right: 10px">转换模式</span>
              <el-select
                  v-model="precess.mode"
                  disabled
                  placeholder="Select"
                  style="width: 200px"
              >
                <el-option
                    v-for="item in transferModeOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="10">
              <el-button :disabled="startDisabled" @click="handleStart">开始</el-button>
              <el-button :disabled="stopDisabled" @click="handleStop">暂停</el-button>
              <el-button :disabled="failDisabled" @click="handleFailed"
              >处理失败
              </el-button
              >
              <el-button :disabled="addDisabled" @click="handleAdded">新增处理</el-button>
              <el-button :disabled="exportDisabled" @click="handleExportProcess"
              >导出结果
              </el-button
              >
            </el-col>
          </el-row>
        </template>
        <div>
          <el-row>
            <el-col :span="2"><span style="color: #448e97">AI处理进度</span></el-col>
            <el-col :span="20">
              <el-progress
                  v-if="precess.status === 1"
                  :percentage="percentage"
                  :stroke-width="10"
                  striped
                  striped-flow
                  :duration="10"
              />
              <span v-if="precess.status !== 1">{{ statusText }}</span>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import router from "@/router";
import { removeLocalStorage } from "@/utils/storage";
import { getUrlParams, open } from "@/utils/window";
import {
  getProcessInfo,
  executeTransfer,
  restartTransfer,
  pauseTransfer,
  exportTransfer,
} from "@/api/projectDetail/projectDetail";
import useUtils from "@/views/dimensioning/project/hooks/useUtils";
import { useProjectDetailStore } from "@/store";

const { handleExport } = useUtils();
const storedTaskData = useProjectDetailStore();
export default {
  components: {},
  props:{
    commonList: {
      type: Object,
      default: {}
    }
  },
  data() {
    const { type:pageType, id:taskId, status:projectStatus } = getUrlParams();
    return {
      taskId: +taskId || +storedTaskData.taskId,//编辑or新建
      precess: {
        mode: "", //转换模式
        status: 0, //0-未开始 1-进行中 2-成功 3-失败 4-暂停
        totalCount: 0,
        sucCount: 0,
        failCount: 0,
        processCount: 0,
        notStartCount: 0,
        pauseCount: 0,
        addCount: 0,
      },
      transferModeOptions: [
        // {name: '视频帧提取', value:'VIDEO_FRAME_EXTRACT'},
      ], //转换模式选项
      timer: null,
    };
  },
  computed: {
    statusText() {
      //0-未开始 1-进行中 2-成功 3-失败 4-暂停
      if (this.precess.status === 0 || this.precess.status == null) return "未开始";
      if (this.precess.status === 1) return "进行中";
      if (this.precess.status === 2) return "成功";
      if (this.precess.status === 3) return "失败";
      if (this.precess.status === 4) return "暂停";
    },
    //进度条
    percentage() {
      const {
        totalCount,
        sucCount,
        failCount,
        processCount,
        notStartCount,
        pauseCount,
        addCount,
      } = this.precess;
      return (
          Math.round(
              ((sucCount + failCount + pauseCount) / (totalCount - addCount)) * 1000
          ) / 10
      );
    },
    failDisabled() {
      return this.precess.failCount === 0;
    },
    addDisabled() {
      return this.precess.addCount === 0;
    },
    stopDisabled() {
      return this.precess.status !== 1;
    },
    startDisabled() {
      return ![0, 4].includes(this.precess.status);
    },
    exportDisabled() {
      return false;
    },
  },
  watch:{
    'storedTaskData.step':(val) => {
      console.log("clearInterval")
      val !== 4 && timer && clearInterval(timer)
    }
  },
  async created() {
    // await initSelectData()
    removeLocalStorage("DRAFT");
    console.log("ccc",this.commonList)
    
    this.transferModeOptions = this.commonList.imageTransferModes;
    //进度状态的轮询
    this.timer && clearInterval(this.timer);
    await this.updateProcess(); //先执行一次
    this.timer = setInterval(this.updateProcess, 5000);
  },
  methods: {
    godetails() {
      this.timer && clearInterval(this.timer);
      router.push({
        path: "/dimensioning/projectDetailView",
        query: {
          projectId: this.taskId,
        },
      });
    },
    handleGoBack() {
      this.timer && clearInterval(this.timer);
      router.push({
        path: "/dimensioning/project",
      });
    },
    async updateProcess() {
      const transferRes = await getProcessInfo({ taskId: this.taskId });
      this.precess = transferRes.data || transferRes;
      if ([2, 3, null].includes(this.precess.status)) {
        //处理完成后清除
        this.timer && clearInterval(this.timer);
      }
    },
    async handleStart() {
      const res = await executeTransfer({ taskId: this.taskId });
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(this.updateProcess, 5000);
    },
    async handleStop() {
      const res = await pauseTransfer({ taskId: this.taskId });
    },
    async handleFailed() {
      const res = await restartTransfer({ taskId: this.taskId });
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(this.updateProcess, 5000);
    },
    async handleAdded() {
      const res = await executeTransfer({ taskId: this.taskId });
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(this.updateProcess, 5000);
    },
    handleExportProcess() {
      handleExport(this.taskId);
    },
  },
  beforeDestroy(){
    this.timer && clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.created {
  .el-progress-bar__inner {
    border-radius: 20px;
    width: 0%;
    height: 100%;
    transition: width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.36, 0.55, 0.63, 0.48);
    background-image: url("@/assets/images/icon-progress-bar.png");
  }

  .created-conatiner {
    display: flex;
    justify-content: center;
    padding-bottom: 80px;

    .created-content {
      text-align: center;

      i {
        font-size: 74px;
        color: #0dab76;
        margin-bottom: 20px;
      }

      .text {
        font-weight: 700;
        font-size: 24px;
        color: #000000;
        margin-bottom: 40px;
        margin-top: 100px;
      }
    }
  }

  .pretreatment {
    width: 1164px;
    margin: 0 auto;
    //border: 1px solid #d9d9d9;
    //padding: 32px;
    //box-sizing: border-box;
    .title {
      font-weight: 700;
      font-size: 16px;
      color: #333333;
      margin-bottom: 20px;
    }

    .tips {
      background: rgba(68, 142, 151, 0.1);
      border: 1px solid rgba(68, 142, 151, 0.2);
      border-radius: 2px;
      padding: 10px 12px;
      font-size: 12px;
      color: #666;
      margin-bottom: 32px;
      display: flex;

      i {
        color: #448e97;
      }
    }
  }

  .dialog-content {
    p {
      text-align: center;
    }

    .title {
      font-weight: 700;
      font-size: 18px;
      color: #333333;
      margin-bottom: 20px;
    }

    .tips {
      font-weight: 400;
      font-size: 14px;
      color: #888888;
    }
  }

  .label {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;

    color: #448e97;
  }

  .el-form {
    display: inline-block;
  }

  .created-buttons {
    .el-button {
      vertical-align: text-top;
    }
  }

  .AI {
    display: flex;
    align-items: center;
  }
}
</style>
